<template>
  <div id="main">
    <nav class="navbar-inverse" id="daohang">
      <div class="daohang">
        <div class="navbar-header clearfix">
          <button type="button" class="zd" id="zd">
            <span class="glyphicon glyphicon-align-justify"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="daohangtiao">
          <span class="close"
            ><a @click="toIndex()" href="javascript:void(0);"><i></i></a
          ></span>
        </div>
      </div>
    </nav>
    <div class="main">
      <div class="container">
        <div class="c2">
          <p>从这里开启旅程</p>
        </div>
        <div class="c3">
          <form>
            <div class="form-group">
              <label for="usernameoremail">用户名或邮箱</label>
              <input type="text" class="form-control" id="usernameoremail" />
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="password" class="form-control" id="password" />
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" /> 记住我（请在私人计算机上使用此功能）
              </label>
            </div>
            <div class="c3-1" id="app">
              <el-button
                @click="Login()"
                type="button"
                class="btn btn-default btn1"
                >登录</el-button
              >
              <a
                @click="toRegister()"
                href="javascript:void(0);"
                type="button"
                class="btn btn-default btn2"
                >注册</a
              >
            </div>
            <div class="c3-2 clearfix">
              <span class="c3-2-2">其他账号登录：</span>
              <div class="c3-2-1">
                <a href="" title="使用腾讯QQ登录"><span class="s1"></span></a>
                <a href="" title="使用微信登录"><span class="s2"></span></a>
                <a href="" title="使用谷歌登录"><span class="s3"></span></a>
                <a href="" title="使用脸书登录"><span class="s4"></span></a>
              </div>
            </div>
            <div class="c3-3 clearfix">
              <a href="" class="pull-right">忘记密码？点这里找回</a>
            </div>
          </form>
        </div>
      </div>
    </div>
    <ul class="cbl">
      <li>
        <a href="#">
          <div class="icon d1">
            <i class="i1"></i><span class="title">在线客服</span>
          </div>
        </a>
      </li>
      <i class="clearfix"></i>
      <li>
        <a href="#">
          <div class="icon d2">
            <i class="i2"></i><span class="title">4006285729</span>
          </div>
        </a>
      </li>
      <i class="clearfix"></i>
      <li>
        <a href="#">
          <div class="icon">
            <i class="i3"></i><span class="title">教程中心</span>
          </div>
        </a>
      </li>
      <i class="clearfix"></i>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {};
  },
  methods: {
    Login() {
      var usernameoremail = document.getElementById("usernameoremail").value;
      var password = document.getElementById("password").value;
      if (usernameoremail == "admin" && password == "123456") {
        window.sessionStorage.setItem("token", "username");
        this.$router.push("/main");
        this.$message.success("登录成功!");
      } else {
        this.$message.error("登录失败!");
      }
    },
    toIndex() {
      this.$router.push("/index");
    },
    toRegister() {
      this.$router.push("/register");
    },
  },
};
</script>
<style lang="css" scoped>
body {
  overflow-x: hidden;
}

.main {
  background-color: #383838;
  position: absolute;
  top: 120px;
  transform: top 0.3s;
  width: 100%;
}
.c3 {
  width: 348px;
  background-color: #383838;
}

nav {
  background: #383838 !important;
}
/*缩小导航*/
.close {
  padding-top: 20px;
  padding-bottom: 85px;
  text-shadow: none;
  filter: alpha(opacity=100);
  opacity: 1;
  transition: all 0.6s ease;
}
.close i {
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url("../../assets/img/close1.png");
}
.close i:hover {
  background-image: url("../../assets/img/close2.png");
}

.c2 {
  background-color: #383838;
  margin-top: 0;
  padding: 0px 3px 41px 0px;
  text-align: center;
  opacity: 0.8;
}
.c2 img {
  width: 159px;
  height: 51px;
  margin-bottom: 10px;
  color: #8d9095;
}
.c2 p {
  font-size: 20px;
  letter-spacing: 6px;
  line-height: 1.8;
  color: #ffffff;
}
.c3 {
  margin: 0 auto;
  line-height: 35px;
}
.c3 input {
  background: #383838;
  border-color: #5b5b5b;
}
.c3 .form-control:focus {
  border-color: #ffffff;
  outline: 0;
}
.c3 label {
  color: #cccccc;
  font-size: 15px;
  cursor: pointer;
}
.c3 input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-top: 10px;
}
.c3 .c3-1 {
  border-top: 1px solid #e4e4e4;
  padding-top: 10px;
}
.c3 .c3-1 .btn {
  width: 100%;
  margin-top: 10px;
}
.c3 .btn1 {
  background: #e4e4e4;
  font-size: 16px;
  border-top: 1px solid #e4e4e4;
}
.c3 .btn2 {
  background: #383838;
  border-top: 1px solid #e4e4e4;
  font-size: 16px;
  color: #ffffff;
}
.c3 .c3-2-2 {
  color: #999;
  float: left;
  margin-top: 5px;
}
.c3 .c3-2-1 {
  margin-top: 10px;
  float: left;
}
.c3 .c3-2-1 a {
  display: inline-block;
  height: 24px;
  width: 24px;
}
.c3 .c3-2-1 span {
  height: 24px;
  width: 24px;
  display: inline-block;
  background-image: url("../../assets/img/social_icon_24x24.png");
}
.c3 .c3-2-1 .s1 {
  background-position: -48px -48px;
}
.c3 .c3-2-1 .s2 {
  background-position: 0 -48px;
}
.c3 .c3-2-1 .s3 {
  background-position: -240px -48px;
}
.c3 .c3-2-1 .s4 {
  background-position: -96px -48px;
}
.c3 .c3-3 a {
  text-decoration: none;
  color: #999;
  font-size: 15px;
}
</style>
